<template>
  <div class="wrap_body_box">
    <div class="wrap_body_box_one">
      <div class="right_one_head">
        <div class="right_one_head_btn">
          <el-button class="btnDefault" v-show="!addShow && !editShow" @click="addDelect">新增角色</el-button>
          <el-button class="btnDefault mr20" v-show="addShow" @click="addResove">保存</el-button>
          <el-button class="btnDefault mr20" v-show="editShow" @click="addResove">保存修改</el-button>
          <el-button class="btnDefault" v-show="addShow || editShow" @click="cancelDelect">取消</el-button>
        </div>
        <div class="right_one_head_now">
          <span>当前位置 :</span>
          <span>系统角色管理</span>
          <span v-show="editShow">&gt; 编辑</span>
          <span v-show="addShow">&gt; 新增角色</span>
        </div>
      </div>
      <div class="fixThTable right_one_body table" v-show="!addShow && !editShow">
        <div class="tableBody">
          <el-table
          :data="JsData"
          border
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%">
          <el-table-column prop="xh" label="序号"></el-table-column>
          <el-table-column prop="JSname" label="角色名称"></el-table-column>
          <el-table-column prop="JSdesc" :show-overflow-tooltip="true" label="角色描述"></el-table-column>
          <el-table-column prop="JSstatu" label="角色状态"></el-table-column>
          <el-table-column prop label="操作" width="100">
            <template slot-scope="scope">
              <span
                @click.prevent="deleteRow1(scope.$index,scope.row)"
                class="normalColor mr10 cursor"
              >编辑</span>
              <span
                @click.prevent="DelectRow2(scope.$index,scope.row)"
                class="normalColor cursor"
              >删除</span>
            </template>
          </el-table-column>
        </el-table>
        </div>

        <div class="page">
          <pages :page="page" @changePage="changePage"></pages>
        </div>
      </div>
      <div class="right_one_body_add" v-show="addShow || editShow">
        <div class="body_add_box">
          <div class="addBB">
            <div class="flex">
              <div class="addTitle font16">角色名称:</div>
              <div>
                <el-input v-model="input" class="noBg border1" placeholder="请输入内容" maxlength="50"></el-input>
              </div>
            </div>
            <div class="flex">
              <div class="addTitle font16">角色状态:</div>
              <div style="padding-top: 5px;">

                <el-radio v-model="radio" label="0">禁止登录系统</el-radio>
                <el-radio v-model="radio" label="1">允许登录系统</el-radio>
              </div>
            </div>
            <div class="flex">
              <div class="addTitle font16">角色描述:</div>
              <textarea v-model="desc" name id cols="30" rows="10"  maxlength="1000"></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pages from "../base/pages.vue";
import { log } from "util";
import { setTimeout } from 'timers';
export default {
  name: "systmUserAdmin",
  data() {
    return {
      row:{
        ID:null,
        mc:"",
        status:0,
        desc:""
      },
      desc:"",
      addShow: false,
      editShow: false,
      radio: "0",
      num: null,
      input: "",
      page: {
        //总条数
        total: 0,
        //每页条数
        limit: 10,
        //当前页数
        currentPage: 1,
        pageSizes: [10, 25, 50, 100],
        //实际返回的条数
        dataLength: 7
      },
      JsData: [],
      useInfo: [
        { name: "新增用户" },
        { name: "修改用户" },
        { name: "编辑权限" },
        { name: "配置系统" }
      ]
    };
  },
  mounted() {
    this.onLoadLise();
  },
  computed: {
    TreeRfdwnm() {
      return this.$store.state.TreeRfdwnm;
    }
  },
  watch: {
    TreeRfdwnm() {
      this.onLoadLise();
    }
  },
  methods: {
    //系统角色列表数据
    onLoadLise() {
      let params = {
        pid:localStorage.getItem("serverName"),
        rfdwnm:localStorage.getItem("TreeRfdwnm"),
        serviceName: localStorage.getItem("serverName"),
        limit: this.page.limit,
        start: this.page.currentPage
      };
      this.$axios.post("/role/query", params).then(res => {
        res = res.data;
        this.page.total = res.totlaCount;
        if (res.result.resultCode == "000000") {
          this.JsData = [];
          res.roles.forEach((item, index) => {
            this.JsData.push({
              xh: index + 1,
              roleID:item.roleID,
              JSname: item.roleName,
              JSdesc: item.description,
              JSstatu: item.status == 1 ? "可用" : "禁止"
            });
          });
        }
      });
    },
    handleCurrentChange() {},
    //新增
    addDelect() {
      /**
       * @author fzy
       * @desc 用户名、描述置空
       */
      this.input = '',
      this.desc = '',

      this.addShow = true;
    },
    cancelDelect() {
      this.addShow = false;
      this.editShow = false;
    },
    changePage(data) {
      this.onLoadLise();
    },
    //新增保存
    addResove() {
      if (this.num == null) {
        /**
         * @author fzy
         * @desc 必填项提示
         */
        if (this.input == '') {
          this.$message({
            type: 'warning',
            message: '角色名称为必填项，请输入角色名称！'
          });
          return
        };

         let params = {
        roleID: "",
        pid:localStorage.getItem("serverName"),
        roleName: this.input,
        status: this.radio,
        serviceName: localStorage.getItem("serverName"),
        description: this.desc,
        creater: localStorage.getItem("creater"),
        rfdwnm: JSON.parse(localStorage.getItem('baseJson')).rfdwnm
      };
      this.$axios.post("/role/upsert",params).then(res => {
        if(res.data.result.resultCode=="000000"){
          this.$message({
            type: "success",
            message: "新增成功!"
          });
        /**
         * @author fzy
         * @desc 除去新增后延迟
         */
          // setTimeout(() => {
          //   this.onLoadLise()
          // }, 2000);
          this.onLoadLise()

        }else if(res.data.result.resultCode=="99012"){
          this.$message({
            type: "warning",
            message: "角色名称重复，请重新新增！"
          });
          return
        }
      });
      } else {

        /**
         * @author fzy
         * @desc 必填项提示
         */
        if (this.input == '') {
          this.$message({
            type: 'warning',
            message: '角色名称为必填项，请输入角色名称！'
          });
          return
        };

          let params = {
        roleID: this.ID,
        pid:localStorage.getItem("serverName"),
        roleName: this.input,
        status: this.radio,
        serviceName: localStorage.getItem("serverName"),
        description: this.desc,
        creater: localStorage.getItem("creater"),
        rfdwnm: localStorage.getItem("TreeRfdwnm")
      };
      this.$axios.post("/role/upsert",params).then(res => {
        if(res.data.result.resultCode=="000000"){
          this.$message({
            type: "success",
            message: "编辑成功!"
          });
        /**
         * @author fzy
         * @desc 除去新增后延迟，置空roleID,防止编辑后新增会修改编辑时的那个用户
         */
          this.ID = '';
          // setTimeout(() => {
          //   this.onLoadLise()
          // }, 2000);
          this.onLoadLise()

        }
      });
      }
      this.addShow = false;
      this.editShow = false;
    },
    //编辑权限
    deleteRow1(id,row) {
      this.num = id;
      this.input=row.JSname
      this.desc=row.JSdesc
      this.radio=row.JSstatu=="可用"?"1":"0"
      // this.addShow = true;
      this.editShow = true;
      this.ID=row.roleID
    },
    //删除
    DelectRow2(index,row) {
      let ID=row.roleID

      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.get("/role/delete",{params:{roleID:ID}}).then(res=>{
              if(res.data.result.resultCode=="000000"){
          this.$message({
            type: "success",
            message: "删除成功!"
          })
            this.onLoadLise()
        }
          })

        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  components: {
    pages
  }
};
</script>
<style lang="less">
.wrap_body_box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // padding: 0 20px 20px 0;
  .wrap_body_box_one {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 5px 2px #30334e99;
    .right_one_head {
      display: flex;
      height: 7%;
      line-height: 2;
      justify-content: space-between;
      padding: 0 20px;
      color: #fff;
      .right_one_head_btn {
        width: 80%;
        margin-top: 10px;
      }
      .right_one_head_now {
        // width: 20%;
        margin-top: 20px;
      }
    }
    .right_one_body {
      background-color: transparent;
      height: 93%;
      width: 100%;
      padding: 0 1%;
      position: relative;
      box-sizing: border-box;
      // .el-table th{
      //     background-color: #197FB0;
      //     color: white;
      //   }
      .el-table__body tr.current-row > td {
        background-color: transparent;
      }
      .page {
        margin-top: 20px;
      }
    }
    .right_one_body_add {
      background-color: transparent;
      height: 93%;
      width: 100%;
      padding: 0% 1% 2%;
      position: relative;
      box-sizing: border-box;

      .body_add_box {
        width: 100%;
        height: 100%;
        border: 1px solid #09a9ad;
        border-top: 5px solid #09a9ad;
        .addBB {
          // width: 400px;
          height: 400px;
          margin-top: 50px;
          margin-left: 50px;
          div {
            margin-bottom: 30px;
            .addTitle {
              width: 100px;
              color: white;
              text-align: center;
            }
            textarea {
              background-color: transparent;
              border: none;
              border: 1px solid #08b1b6;
              height: 200px;
              width: 470px;
              color: #ccc;
              resize: none;
            }
          }
        }
      }
    }
  }
}
</style>
